<template>
  <div class="passsword">
    <div class="pwd-header">
      <img src="~@/assets/img/logo2.png" alt="octopus" @click="$router.replace({ name: 'login' })" />
      <p>找回密码</p>
      <div class="login" @click="$router.replace({ name: 'login' })">
        <icon-svg name="iconUserName"></icon-svg> 登录
      </div>
    </div>
    <div class="pwd-content">
      <div v-if="!choosen">
        <div class="title">为确认是你本人操作，请选择以下验证方式帮助您找回密码</div>
        <ul class="clearfix">
          <li v-if="ways.find(v => v === '3')" :style="{ width: itemWidth + '%' }">
            <div class="choosen gray" :class="{ active: active === 'phone' }" @click="choose('phone')">
              <span><i class="el-icon-mobile-phone"></i></span>
              <p>手机找回密码</p>
              <p>如果您的手机号码还在正常使用，请使用此方式</p>
            </div>
          </li>
          <li v-if="ways.find(v => v === '2')" :style="{ width: itemWidth + '%' }">
            <div class="choosen" :class="{ active: active === 'mail' }" @click="choose('mail')">
              <span><i class="el-icon-message"></i></span>
              <p>邮箱找回密码</p>
              <p>如果您预设的邮箱还在正常使用，请使用此方式</p>
            </div>
          </li>
          <li v-if="ways.find(v => v === '1')" :style="{ width: itemWidth + '%' }">
            <div class="choosen" :class="{ active: active === 'question' }" @click="choose('question')">
              <span><i class="el-icon-question"></i></span>
              <p>密保找回密码</p>
              <p>如果您还记得密保的答案，请使用此方式</p>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="loginInfo">
        <div class="title">请输入你需要找回登录密码的账户名</div>
        <el-form
          ref="editForm"
          :model="editForm"
          :rules="editFormRule"
          label-width="100px"
          @submit.native.prevent
          @keyup.enter.native="onSubmit"
        >
          <el-form-item label="登录名" prop="loginUname">
            <el-input v-model="editForm.loginUname" placeholder="请输入登录名"></el-input>
          </el-form-item>
          <el-form-item align="left">
            登录名格式，如：admin，具体根据实际情况
          </el-form-item>
          <!-- <el-form-item label="验证码" prop="captcha">
            <div class="clearfix">
              <div class="captcha-input">
                <el-input v-model="editForm.captcha" placeholder="验证码"></el-input>
              </div>
              <div class="captcha-img">
                <img :src="captchaPath" @click="getCaptcha()" alt />
              </div>
            </div>
          </el-form-item>
          <el-form-item align="left">
            请输入验证码，以便确认身份。
          </el-form-item> -->
          <el-form-item align="right">
            <el-button @click="cancel">返回</el-button>
            <el-button type="primary" @click="onSubmit">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ways: [],
      active: '',
      choosen: false,
      editForm: {
        loginUname: '',
        captcha: '',
        captchaId: ''
      },
      captchaPath: '',
      editFormRule: {
        loginUname: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        captcha: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getWays()
  },
  computed: {
    itemWidth() {
      return 100 / this.ways.length
    }
  },
  methods: {
    getWays() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysParameter/retrieve/pwd/means'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.ways = data.data.paramValue.split('|')
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    choose(way) {
      this.active = way
      this.$nextTick(() => (this.choosen = true))
    },
    cancel() {
      this.active = ''
      this.choosen = false
    },
    onSubmit() {
      if (this.active) {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            this.$router.push({ name: this.active, query: { loginUname: this.editForm.loginUname } })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.passsword {
  height: 100%;
  .pwd-header {
    line-height: 50px;
    position: relative;
    &:after {
      height: 1px;
      content: '';
      background-color: #ccc;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      transform: scaleY(0.5);
    }
    img {
      height: 40px;
      margin-left: 50px;
      vertical-align: middle;
      cursor: pointer;
    }
    p {
      display: inline-block;
      font-size: 18px;
      color: #12417f;
      margin: 0 0 0 20px;
      padding: 0;
      vertical-align: middle;
    }
    .login {
      float: right;
      margin-right: 20px;
      cursor: pointer;
      svg {
        width: 20px;
        height: 20px;
        margin: -5px 5px 0 0;
        vertical-align: middle;
      }
      &:hover {
        color: #12417f;
      }
    }
  }
  .pwd-content {
    width: 100%;
    text-align: center;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    margin-top: -50px;
    .title {
      font-size: 18px;
      margin: 50px 0;
    }
    .item-title {
      padding: 50px 0 20px 0;
      position: relative;
      &::after {
        height: 1px;
        content: '';
        background-color: #ccc;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        transform: scaleY(0.5);
      }
    }
    li {
      list-style-type: none;
      float: left;
      .choosen {
        display: inline-block;
        cursor: pointer;
        &:hover i {
          font-size: 100px;
        }
        span {
          display: inline-block;
          width: 170px;
          height: 170px;
          background-color: #3e82e7;
          border-radius: 50%;
          text-align: center;
          line-height: 170px;
          transition: all 0.3s linear;
          i {
            font-size: 80px;
            color: #fff;
            vertical-align: middle;
            margin-top: -10px;
            transition: all 0.3s linear;
          }
        }
        p {
          margin-top: 20px;
          &:last-child {
            color: #afafaf;
          }
        }
        &.active {
          span {
            transform: rotateY(360deg);
          }
          p {
            color: #3e82e7;
          }
        }
      }
    }
    .loginInfo {
      width: 500px;
      margin: 0 auto;
      .captcha-input {
        width: 75%;
        float: left;
      }
      .captcha-img {
        width: 25%;
        text-align: right;
        float: left;
      }
    }
    .content-wrap {
      width: 800px;
      margin: 0 auto;
    }
    .el-step__head.is-process,
    .el-step__title.is-process,
    .el-step__description.is-process {
      color: #3e82e7;
      border-color: #3e82e7;
    }
  }
}
</style>
